/*
 * 有赞产品列表
 * @Author: zfx
 * @Date: 2018-09-27 17:53:05
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-10-26 15:57:00
 */
<style lang="less" rel="stylesheet/less" type="text/less" >
.v-customer-product-index{
	.ivu-table-column-center{
		padding: 5px 0;
    }
    /*table表格样式*/
	.ivu-table-header {
		tr {
			font-size: 14px;
			font-weight: normal;
			color:#707070;
			font-weight: normal;
			th {
				padding: 12px 0;
				font-weight: normal;
			}
		}
	}
	.ivu-table-body {
		font-size: 12px;
		color: #666;
	}
	/*table表格样式 END*/
	.info{
		text-align: left;
		white-space: nowrap;
		padding: 5px 0;
	}
	.info-thumb{
		width: 60px;
		height: 60px;
		display: table-cell;
		cursor: pointer;
		img{
			width: 100%;
		}
	}
	.info-title{
		height: 60px;
		display:  table-cell;
		white-space: normal;
		vertical-align: middle;
		padding-left: 8px;
	}
	.info-item {
		text-align: center;
	}
	.deleted, .hot, .new, .sale {
		cursor: pointer;
	}
}
</style>
<template>
	<div class="v-customer-product-index">
		<Table
			:columns="columns"
			:loading="loading"
			:data="products"
			:height="tableHeight()"
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>
import { Tag, Button, Switch, Tooltip } from 'iview';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'YouzanProductIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		products: {
			type: Array,
			default() {
				return [];
			},
		},
		categories: {
			type: Array,
			required: true,
		},
		sexes: {
			type: Array,
			default() {
				return [];
			},
		},
		positions: {
			type: Array,
			default() {
				return [];
			},
		},
		cosmeticMaterials: {
			type: Array,
			default() {
				return [];
			},
		},
		groupBrands: {
			type: Array,
			default() {
				return [];
			},
		},
		brandsList: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('product.code'),
					key: 'spu_code',
					width: 160,
					align: 'center',
					render: (h, { row }) => <div> { row.spu_code || '-' } </div>,
				},
				{
					title: this.$t('product.title'),
					key: 'title',
					minWidth: 260,
					align: 'center',
					render: (h, { row }) => {
						const thumb_image = row.thumb_image ? <img onClick={() => this.showPicture(row.thumb_image.key)} src={ row.thumb_image.key } alt="无" /> : '无';
						const title = row.title ? row.title : this.$t('common.none');
						return (
							<div class="info">
								<div class="info-thumb">{ thumb_image }</div>
								<div class="info-title">{ title }</div>
							</div>
						);
					},
				},
				{
					title: this.$t('product.category'),
					key: 'category_id',
					align: 'center',
					width: 100,
					render: (h, { row }) => (
						<div class="category">
							<div class="info-item">
								{ row.category && row.category.name ? row.category.name : this.$t('common.none') }
							</div>
						</div>
					),
				},
				{
					title: this.$t('product.brand_series'),
					key: 'brand',
					width: 160,
					align: 'center',
					render: (h, { row }) => {
						const [brands] = this.brandsList.filter(item => item.id === row.brand_series_id);
						return (
							<div class="brand">
								<div class="info-item">
									{ row.brand ? row.brand.name : this.$t('common.none') }
								</div>
								{
									this.hasModelAssets(row.category_id) ? <div class="info-item">
										（{ this.$t('product.series') }: { brands ? brands.name : this.$t('common.none') }）
									</div> : ''
								}
							</div>
						);
					},
				},
				{
					title: this.$t('product.tag'),
					key: 'product_tags',
					align: 'center',
					width: 160,
					render: (h, { row }) => {
						let tags = this.$t('common.none');
						if (Array.isArray(row.product_tags) && row.product_tags.length > 0) {
							tags = row.product_tags.map(tag => <Tag type="border">{ tag.name }</Tag>);
						}
						return (<div>{ tags }</div>);
					},
				},
				{
					title: this.$t('product.try_on'),
					key: 'try_on',
					align: 'center',
					width: 110,
					sortable: 'custom',
					render: (h, { row }) => <div> { String(row.try_on) || 0 } </div>,
				},
				{
					title: this.$t('product.price'),
					key: 'market_price',
					width: this.$i18n.locale === 'en-CN' ? 140 : 160,
					align: 'center',
					render: (h, { row }) => (
						<div class="price">
							<div class="info-item">
								{ this.$t('product.origin_price') }　: { row.market_price || this.$t('common.none') }
							</div>
							<div class="info-item">
								{ this.$t('product.promotional_price') }: { row.sell_price || this.$t('common.none') }
							</div>
						</div>
					),
				},
				{
					title: this.$t('common.created_at'),
					width: 100,
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{ this.$t('common.none') }</div>;
						if (row.created_at) {
							const [day, time] = row.created_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},
				{
					title: this.$t('product.deleted'),
					key: 'is_sale',
					align: 'center',
					width: 70,
					render: (h, { row }) => {
						const value = Number(row.is_sale) === 1 ? 0 : 1;
						return (
							!row.category
								?
								<Tooltip content={this.$t('product.sale_tip')}>
									<Switch
										onOn-change={() => this.$emit('change-state', {
											type: 'is_sale', id: row.id, value, row,
										})}
										disabled={!row.category}
										size="small"
										value={row.is_sale}
										true-value={1}
										false-value={0} >
									</Switch>
								</Tooltip>
								:
								<Switch
									onOn-change={() => this.$emit('change-state', {
										type: 'is_sale', id: row.id, value, row,
									})}
									size="small"
									value={row.is_sale}
									true-value={1}
									false-value={0} >
								</Switch>
						);
					},
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 140,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('common.edit') }
							</Button>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('delete', row.id); }} type="error">
								{ this.$t('common.delete') }
							</Button>
						</div>),
				},
			],
		};
	},
	methods: {

		/**
         * 排序的回调
         * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
         * @return {undefined}
         */
		sortable(param) {
			const search_param = {
				sort_column: param.order === 'normal' ? '' : param.key,

				sort_by: param.order === 'normal' ? '' : param.order.toLocaleUpperCase(),
			};

			this.$emit('sort', search_param);
		},

		/**
		 * 是否有模型素材
		 * @param {number} category_id {类型选中的值value}
		 * @return {boolean} has_assets
		 */
		hasModelAssets(category_id) {
			const [category] = this.categories.filter(item => item.id === category_id);
			return category && !!category.has_asset;
		},

	},
};
</script>
